<template>
  <div class="header-bar">
    <div class="header-logo">
      <Avatar shape="square"
              :src="logo" /> 大玩家商户后台
    </div>
    <div class="header-nav">
      <a @click="golink(item.redirect)"
                   v-for="(item, i) in module"
                   :key="i"
                   :class="{'current': item.active}">{{item.name}}</a>
    </div>
    <div class="custom-content-con">
      <slot></slot>
    <!--  <div class="header-notice"
           @mouseenter="showdrop=true"
           @mouseleave="showdrop=false">
        <Badge :count="3"
               @click.native="golink()">
          <Icon type="ios-notifications"
                size="26"></Icon>
        </Badge>
        <div class="header-notice-dropdown"
             v-show="showdrop">
          <div class="header-notice-head">消息通知</div>
          <div class="header-notice-body">
            <div>
              <p class="msg"><a href="">我是一组消息，最长超过一行字符，版本升级。1.0.3...</a></p>
              <p>2019-02-10 12:33</p>
            </div>
            <div>
              <p class="msg"><a href="">我是一组消息，最长超过一行字符，版本升级。1.0.3...</a></p>
              <p>2019-02-10 12:33</p>
            </div>
          </div>
          <div class="header-notice-footer">
            <a href="">查看更多</a>
          </div>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import './header-bar.less'
export default {
  name: 'HeaderBar',
  props: {
    collapsed: Boolean,
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      logo: require('@/assets/images/logo-min.png'),
      showdrop: false,
      module: this.$store.state.user.module
    }
  },
  watch: {
    '$route' (to, from) {
      this.addCur(to.meta.sn)
    }
  },
  methods: {
    ...mapMutations([
      'setTagNavList'
    ]),
    handleCollpasedChange (state) {
      this.$emit('on-coll-change', state)
    },
    golink (name) {
      if (this.list.length > 0) {
        let res = this.list.filter(item => item.name === this.$config.homeName)
        this.setTagNavList(res)
      }
      this.$nextTick(() => {
        this.$router.push({
          name
        })
      })
    },
    addCur (sn) {
      if (!sn) {
        this.module.forEach((item, i) => {
          item.active = false
        })
        return
      }
      this.module.forEach((item, i) => {
        if (typeof item.msn === 'string') {
          item.active = sn.indexOf(item.msn) === 0
          if (item.active) {
            this.$store.commit('setCurModule', i)
          }
        } else {
          let flag = false
          item.msn.forEach(imsn => {
            if (sn.indexOf(imsn) === 0) {
              flag = true
            }
          })
          item.active = flag
          if (item.active) {
            this.$store.commit('setCurModule', i)
          }
        }
      })
    }
  },
  mounted () {
    this.addCur(this.$route.meta.sn)
  }
}
</script>
